<template>
  <div class="app-container">
    <!-- 供应商信息 -->
    <supplierInformation ref="supplierInformation" v-model="form" state="write" />
    <!-- 申请信息 -->
    <cationInformationFlow ref="cationInformationFlow" v-model="form" state="write" />
    <div style="text-align: right; box-sizing: border-box; padding-right: 20px; margin-top: 20px; background-color: #fff; width: 100%; height: 60px; line-height: 60px; border-radius: 8px">
      <el-button @click="back">返回</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import supplierInformation from './components/supplierInformation'
import cationInformationFlow from './components/cationInformationFlow'
import { backCarSupplier, getDataDetail } from '@/api/pickUpTheCar'
export default {
  // 新增委外收车申请
  name: 'ChangeSupplier',
  components: {
    supplierInformation,
    cationInformationFlow,
  },
  data() {
    return {
      form: {
        supplier: {},
      },
    }
  },
  created() {
    // 接口写好 就可以放开下面的函数
    this.getDataDetail()
  },
  methods: {
    async getDataDetail() {
      try {
        let { data } = await getDataDetail(this.$route.query.backCarId)
        if(data.supplier){
          this.form.supplier = { ...data.supplier }
        }

      } catch (error) {}
    },
    async submit() {
      let result = await this.valid()
      if (result) {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        let data = {
          ...this.form.supplier,
          backCarId: this.$route.query.backCarId,
          customerName: this.$route.query.customerName,
          code: this.$route.query.code,
        }
        backCarSupplier({ supplier: data })
          .then(() => {
            loading.close()
            this.$message.success('提交成功')
            this.back()
          })
          .catch(() => {
            loading.close()
          })
      } else {
        this.error()
      }
    },
    back() {
      this.$tab.closeOpenPage(this.$route)
      this._toPage({
        name: 'PickUpTheCarList',
      })
    },
    error() {
      this.$nextTick(() => {
        const el = document.querySelectorAll('.el-form-item__error')[0]
        el.scrollIntoView({ block: 'center', behavior: 'smooth' })
      })
    },
    valid() {
      return new Promise(async (resolve) => {
        let result = true
        let refs = Object.values(this.$refs)
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index]
          if (Object.prototype.toString.call(ref) == '[object Array]') {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i]
              if (element?.valid) {
                let rc = await element?.valid?.()
                result = result && rc
              }
              if (element?.validate) {
                let rf = await this._valid(ref)
                result = result && rf
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, 'form_validate')
                result = result && rf
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.()
              result = result && rc
            }
            if (ref?.validate) {
              let rf = await this._valid(ref)
              result = result && rf
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, 'form_validate')
              result = result && rf
            }
          }
        }
        resolve(result)
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  overflow: auto !important;
}
</style>
